<template>
  <div class="box">
    <div class="header">
      <HdView />
    </div>
    <div class="footer">
      <div class="left">
        <div class="singlechoice" @click="addSinglechoice()">
          <div class="pic">
            <img src="@/assets/images/single-choice.png" alt="单选" width="25px" height="25px" />
          </div>
          <div class="doc">
            <p>单项选择</p>
          </div>
        </div>
        <div class="multiplechoice" @click="addMultiplechoice()">
          <div class="pic">
            <img src="@/assets/images/multiple-choice.png" alt="多选" width="25px" height="25px" />
          </div>
          <div class="doc">
            <p>多项选择</p>
          </div>
        </div>
        <div class="completion" @click="addCompletion()">
          <div class="pic">
            <img src="@/assets/images/completion.png" alt="填空" width="25px" height="25px" />
          </div>
          <div class="doc">
            <p>填空</p>
          </div>
        </div>
        <div class="shortanswer" @click="addShortAnswer()">
          <div class="pic">
            <img src="@/assets/images/short-answer.png" alt="简答" width="25px" height="25px" />
          </div>
          <div class="doc">
            <p>简答</p>
          </div>
        </div>
        <div class="fileupload" @click="addFileUpload()">
          <div class="pic">
            <img src="@/assets/images/file-upload.png" alt="文件上传" width="25px" height="25px" />
          </div>
          <div class="doc">
            <p>文件上传</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header2">
          <div class="title">问卷标题</div>
          <div class="creator">创建人：一个人</div>
        </div>
        <SingleChoiceView v-for="item in SingleChoiceViewNum" :key="item" />
        <MultipleChoiceView v-for="item in MultipleChoiceViewNum" :key="item" />
        <CompletionView v-for="item in CompletionViewNum" :key="item" />
        <ShortAnswerView v-for="item in ShortAnswerViewNum" :key="item" />
        <FileUploadView v-for="item in FileUploadViewNum" :key="item" />
      </div>
    </div>
  </div>
</template>

<script>
  import HdView from "@/components/HdView";
  import SingleChoiceView from "@/components/SingleChoiceView";
  import MultipleChoiceView from "@/components/MultipleChoiceView";
  import CompletionView from "@/components/CompletionView";
  import ShortAnswerView from "@/components/ShortAnswerView";
  import FileUploadView from "@/components/FileUploadView";
  export default {
    data() {
      return {
        FileUploadViewNum: 0,
        SingleChoiceViewNum: 0,
        MultipleChoiceViewNum: 0,
        CompletionViewNum: 0,
        ShortAnswerViewNum: 0
      }

    },
    components: {
      HdView,
      SingleChoiceView,
      MultipleChoiceView,
      CompletionView,
      ShortAnswerView,
      FileUploadView,
    },
    methods: {
      addSinglechoice() {
        this.SingleChoiceViewNum++
      },
      addMultiplechoice() {
        this.MultipleChoiceViewNum++
      },
      addCompletion() {
        this.CompletionViewNum++
      },
      addShortAnswer() {
        this.ShortAnswerViewNum++
      },
      addFileUpload() {
        this.FileUploadViewNum++
      }

    }
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
    margin: 0 auto;

  }

  .footer {
    width: 90vw;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    background: #F3F4F6;

    .left {
      display: inline-block;
      width: 15vw;
      background: #fff;

      .singlechoice,
      .multiplechoice,
      .completion,
      .shortanswer,
      .fileupload {
        margin-top: 15px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        border-bottom: 1px solid #bbb;
        padding: 5px;
        border-radius: 2px;
      }

      .singlechoice:hover,
      .multiplechoice:hover,
      .completion:hover,
      .shortanswer:hover,
      .fileupload:hover {
        background: #F3F4F6;
      }

      .doc {
        margin-left: 2vw;
      }
    }

    .right {
      display: inline-block;
      width: 75vw;

      .header2 {
        background: #fff;
        padding: 2vw;
        margin-bottom: 1.5vh;

        .title {
          width: 100%;
          font-size: 28px;
          text-align: center;
        }

        .creator {
          float: right;
          font-size: 15px;
          margin-right: 10vw;

        }
      }
    }
  }

  /* .footer {
    width: 90vw;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    .left {
      float: left;
      width: 30vw;
      height:90;
      background: #fff;
      margin-top:5px;

      .singlechoice {
        border-radius: 8px;
        float: left;
        width: 200px;
        height: 52px;
        margin: 0 auto;
        position: relative;

        &:hover {
          background: pink;
        }

        .pic {
          display: flex;
          justify-content: center;
          align-items: center;
          float: left;
          width: 67px;
          height: 50px;
        }

        .doc {
          display: flex;
          align-items: center;
          float: left;
          width: 133px;
          height: 50px;

          p {
            margin-left: 16px;
          }
        }
      }

      .space {
        margin-left: 10px;
        float: left;
        width: 180px;
        height: 1px;
        background-color: #000;
      }

      .multiplechoice {
        float: left;
        width: 200px;
        height: 52px;
        margin: 0 auto;
        position: relative;

        &:hover {
          background: pink;
        }

        .pic {
          display: flex;
          justify-content: center;
          align-items: center;
          float: left;
          width: 67px;
          height: 50px;
        }

        .doc {
          display: flex;
          align-items: center;
          float: left;
          width: 133px;
          height: 50px;

          p {
            margin-left: 16px;
          }
        }
      }

      .space {
        margin-left: 10px;
        float: left;
        width: 180px;
        height: 1px;
        background-color: #000;
      }

      .completion {
        float: left;
        width: 200px;
        height: 52px;
        margin: 0 auto;
        position: relative;

        &:hover {
          background: pink;
        }

        .pic {
          display: flex;
          justify-content: center;
          align-items: center;
          float: left;
          width: 67px;
          height: 50px;
        }

        .doc {
          display: flex;
          align-items: center;
          float: left;
          width: 133px;
          height: 50px;

          p {
            margin-left: 36px;
          }
        }
      }

      .space {
        margin-left: 10px;
        float: left;
        width: 180px;
        height: 1px;
        background-color: #000;
      }

      .shortanswer {
        float: left;
        width: 200px;
        height: 52px;
        margin: 0 auto;
        position: relative;

        &:hover {
          background: pink;
        }

        .pic {
          display: flex;
          justify-content: center;
          align-items: center;
          float: left;
          width: 67px;
          height: 50px;
        }

        .doc {
          display: flex;
          align-items: center;
          float: left;
          width: 133px;
          height: 50px;

          p {
            margin-left: 36px;
          }
        }
      }

      .space {
        margin-left: 10px;
        float: left;
        width: 180px;
        height: 1px;
        background-color: #000;
      }

      .fileupload {
        float: left;
        width: 200px;
        height: 52px;
        margin: 0 auto;
        position: relative;

        &:hover {
          background: pink;
        }

        .pic {
          display: flex;
          justify-content: center;
          align-items: center;
          float: left;
          width: 67px;
          height: 50px;
        }

        .doc {
          display: flex;
          align-items: center;
          float: left;
          width: 133px;
          height: 50px;

          p {
            margin-left: 16px;
          }
        }
      }

      .space {
        margin-left: 10px;
        float: left;
        width: 180px;
        height: 1px;
        background-color: #000;
      }
    }

    .right {
      float: left;
      width: 1240px;
      height: 908px;
      background-color: rgba(243, 244, 246, 100);

    }
  } */
</style>